<template>
	<view style="height: 100%;display: flex;flex-direction: column;">
		<view class="bg_fff" style="padding: 20rpx 0rpx 10rpx;">
			<u-tabs :list="typeList" @click="typeClick" lineColor="#333333" keyName="name"
				:activeStyle="{fontWeight: 'bold',color: '#333333',transform: 'scale(1.2)'}"
				:itemStyle="{width:'30%',marginBottom:'20rpx'}"
				:inactiveStyle="{color: '#999999', transform: 'scale(1)'}" scrollable="false"></u-tabs>
		</view>
		<view class="dSLComVueLog" v-if="statusList.length>0">
			<text class="dSLComVueLogBox mytext" v-for="(item,index2) in statusList" :key="index2"
				:class='{"active":checkSelect(item.id)}' @click="selectData(item.id)">
				{{item.name}}
			</text>
		</view>
		
		<template v-if="flag!='status3'">
			<view class="dSLComVueTop">
				<view class="dSLComVueTopLeft">
					<u-icon name="search"></u-icon>
					<input class="dSLComVueTopLeftInput" v-model="search_input" type="text" :placeholder="placeholder"
						confirm-type="search" @confirm="ok" />
				</view>
				<view class="dSLComVueTopRight">
					<view class="display_row_btn_center" @click="showPop">
						<u-image
							src="https://dtkj-qnyimg.diankuai.com/%E6%88%91%E7%9A%84%E8%B4%A6%E5%8F%B7/%E8%B4%A7%E5%93%81%E7%B1%BB%E5%9E%8B-01.png"
							width="16px" height="16px">
						</u-image>
						<text class="c_C62B2C f_28">筛选</text>
					</view>
				</view>
			</view>
		</template>

		<template v-if="flag!='status3'">
			<u-list v-if="dataList.length" :customStyle="{
			flex:'1',
			marginBottom: '20rpx',
			paddingLeft:'5%',
			paddingRight:'5%',
			boxSizing: 'border-box',
			paddingTop: '20rpx'
			}" height="0px" @scrolltolower="listScrollTolower">
				<template v-if="action==0">
					<keyword-item :data="item" @clickItem="clickListItem" v-for="(item, index) in dataList" :key="index"
						type="manage" @clickFeedBack="clickFeedBack">
					</keyword-item>
				</template>
				<template v-if="action==1">
					<checkbox-group @change="checkboxChange">
						<view v-for="item in dataList" :key="item.value" class="display_row_center"
							style="justify-content: flex-start;">
							<checkbox :value="item.id" :checked="item.checked" />
							<view style="flex: 1;">
								<keyword-item :data="item" type="manage" :canGoNext="false"></keyword-item>
							</view>
						</view>
					</checkbox-group>
				</template>
			</u-list>
			<u-empty mode="list" v-else :customStyle="{flex:'1'}"></u-empty>

			<view class=" btmBox c_ffffff" style="margin-bottom: 60rpx;"
				v-if="(flag=='status1' && status==2)||flag=='status2'"
				@click="goPage('/pages/mission/addKeyword?id='+detail.id+'&flag='+detail.platform_flag)">
				新增关键词
			</view>
			<view class="btm_box" v-if="flag=='status1' && status!=2 && action==0">
				<view class="btmBox c_C62B2C"
					style="width: 45%;margin: 0px;font-size: 34rpx;background: none;border: 1px solid #C62B2C;"
					@click="changeAction(1)">
					管理
				</view>
				<view class="btmBox c_ffffff" style="width: 45%;margin: 0px;font-size: 34rpx"
					@click="goPage('/pages/mission/addKeyword?id='+detail.id+'&flag='+detail.platform_flag)">
					新增关键词
				</view>
			</view>
			<view class="btm_box" v-if="flag=='status1' && status!=2 && action==1">
				<view class="btmBox c_C62B2C"
					style="width: 45%;margin: 0px;font-size: 34rpx;background: none;border: 1px solid #C62B2C;"
					@click="doDel">
					删除
				</view>
				<view class="btmBox c_ffffff" style="width: 45%;margin: 0px;font-size: 34rpx" @click="changeAction(0)">
					取消
				</view>
			</view>
		</template>
		<template v-else>
			<mission_detail :data="detail" ref="detail" :showBtn="false"></mission_detail>
		</template>

		<uni-popup type="bottom" ref="popup" background-color="#ffffff">
			<view style="height: 250rpx;padding: 20rpx;">
				<view style="font-weight: 600;font-size: 36rpx;" class="mb-20">
					关键词提交时间
				</view>
				<uni-datetime-picker v-model="time" type="daterange" />

				<view class="mt-20 display_row_center">
					<view class=" com_cansel c_C62B2C" style="width: 45%" @click="mSearch(1)">
						重置
					</view>
					<view class="com_ok c_ffffff" style="width: 45%" @click="mSearch(2)">
						确认
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		getKeyWords1,
		delKeyWords
	} from '@/config/api.js'

	export default {
		name: "mission_keyword",
		props: {
			detail: {
				type: Object,
				default: null
			}
		},
		data() {
			return {
				typeList: [{
					flag: "status1",
					name: "管理词库",
					data: [{
						id: 1,
						name: "审核中"
					}, {
						id: 2,
						name: "已通过"
					}, {
						id: 3,
						name: "已拒绝"
					}, {
						id: 4,
						name: "已过期"
					}]
				}, {
					flag: "status2",
					name: "发布回填",
					data: [{
						id: 1,
						name: "待发布"
					}, {
						id: 2,
						name: "已发布"
					}]
				}, {
					flag: "status3",
					name: "任务详情",
					data: []
				}],
				flag: "status1",
				statusList: [],
				status: 1,
				userInfo: {},
				dataList: [],
				mission: null,
				page: 1,
				pages: 1,
				search_input: "",
				time: ["", ""],
				delData: [],
				action: 0
			}
		},
		created() {
			this.userInfo = uni.getStorageSync("UserInfo");
			this.changeStatusList(this.typeList[0]);
		},
		methods: {
			doDel() {
				delKeyWords({
					ids: this.delData
				}).then(res => {
					uni.showToast({
						title: '操作成功！',
						icon: "success",
						duration: 2000
					})

					this.delData = [];
					this.page = 1;
					this.pages = 1;
					this.dataList = [];
					this.getList();

				}).catch(err => {
					uni.showToast({
						title: '操作失败！',
						icon: "error",
						duration: 2000
					})
				})
			},
			changeAction(action) {
				this.action = action;
				if (action == 0) {
					this.delData = [];
				}
			},
			checkboxChange(e) {
				this.delData = e.detail.value;
			},
			mSearch(type) {
				if (type == 1) {
					this.time = ["", ""];
					this.search_input = "";
				}
				this.page = 1;
				this.dataList = [];
				this.getList();
			},
			showPop() {
				this.$refs.popup.open();
				this.show = true;
			},
			clickFeedBack(data) {
				if (data.feedBack.length <= 0) {
					uni.showToast({
						title: '未回填数据！',
						icon: 'none',
						duration: 2000
					})
					return;
				}

				uni.navigateTo({
					url: '/pages/mission/feebackList?mission_id=' + data.mission_id + "&keyword_id=" + data.id
				})

				// this.popData = data.feedBack;
				// this.popitem = data;

				// this.$refs.popup.open();
			},
			setData(res) {
				this.dataList = [];
				this.page = 1;
				this.pages = 1;
				this.mission = res;
				this.getList();
			},
			goPage(url) {
				if (this.userInfo.username == "" || this.userInfo.headimg == "" || this.userInfo.phone == "") {
					uni.showModal({
						title: '提示',
						content: '未完善信息',
						confirmText: '完善',
						success: function(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: "/pages/center/info"
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					})

					return;
				}
				uni.navigateTo({
					url: url
				})
			},
			ok() {
				this.page = 1;
				this.dataList = [];
				this.getList();
			},
			getList() {
				var subData = {
					mission_id: this.detail.id,
					user_id: this.userInfo.id,
					page: this.page,
					keyword: this.search_input,
					create_at: this.time[0] != "" ? this.time[0] + " - " + this.time[1] : ""
				};

				if (this.flag == "status1") {
					subData['status'] = this.status;
				}

				if (this.flag == "status2") {
					subData['has_feedback'] = this.status;
					subData['status'] = 2;
				}

				getKeyWords1(subData).then(res => {
					this.dataList = this.dataList.concat(res.list);
					this.pages = res.page.pages;
					this.page++;
				}).catch(err => {

				})
			},
			listScrollTolower() {
				if (this.page <= this.pages) {
					this.getList();
				}
			},
			selectData(id) {
				this.status = id;
				this.action = 0;

				this.dataList = [];
				this.page = 1;
				this.pages = 1;
				this.getList();
			},
			checkSelect(id) {
				return id == this.status;
			},
			typeClick(item) {
				this.action = 0;
				this.flag = item.flag;
				this.changeStatusList(item);

				if (item.flag != "status3") {
					this.dataList = [];
					this.page = 1;
					this.pages = 1;
					this.getList();
				}
			},
			changeStatusList(item) {
				if (item.data.length > 0) {
					this.status = item.data[0].id;
					this.statusList = item.data;
				} else {
					this.statusList = item.data;
				}
			},
		}
	}
</script>

<style scoped>
	.dSLComVueLog {
		width: 90%;
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		padding: 10rpx 20rpx;
	}

	.dSLComVueLogBox {
		line-height: 45rpx;
		background-color: #e8e8e8;
		padding: 0rpx 15rpx;
		border-radius: 10rpx;
		flex: none;
		margin: 10rpx 25rpx 15rpx 0;
	}


	.mytext {
		color: #8799a3;
	}

	.active {
		background-color: #FE7C71 !important;
		color: #fff;
	}

	.dSLComVueTop {
		width: 96%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-radius: 40rpx;
		margin-left: 2%;
	}

	.dSLComVueTopLeft {
		flex: 1;
		height: 60rpx;
		background-color: #e8e8e8;
		border-radius: 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 3%;
		border: 1rpx solid #f2f2f2;
	}

	.dSLComVueTopLeftInput {
		flex: 1;
		height: 60rpx;
		padding: 0 20rpx;
	}

	.dSLComVueTopRight {
		width: 120rpx;
		margin-left: 10rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.com_ok {
		background: linear-gradient(to bottom, #C62B2C, #FF7C71);
		border-radius: 40rpx;
		line-height: 80rpx;
		text-align: center;
		font-size: 40rpx;
		box-sizing: border-box;
		width: 25%;
	}

	.com_cansel {
		border: 1px solid #C62B2C;
		border-radius: 40rpx;
		line-height: 80rpx;
		text-align: center;
		font-size: 40rpx;
		box-sizing: border-box;
		width: 25%;
		margin-right: 10%;
	}

	.btm_box {
		width: 84%;
		margin-left: 8%;
		position: fixed;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		bottom: 60rpx;
		z-index: 10;
	}
</style>
